<template>
  <div class="views-calculator">
    <div class="view-header">
      计算器
      <el-button :style="{ marginLeft: '10px' }" @click="add">新建</el-button>
    </div>
    <div class="view-main">
      <Calculator
        v-for="i in CalNum"
        :key="i"
        :id="i"
        @mousedown="setActiveZIndex(i - 1)"
        :style="{ zIndex: CalIndexList[i - 1] }"
      />
    </div>
    <div class="black-bg" />
  </div>
</template>

<script lang="ts">
/* 计算器核心实现了模块化（class构造器+ts）,可鼠标拖拽移动。 */
export default defineComponent({ name: 'ViewsCalculator' })
</script>
<script setup lang="ts">
import { defineComponent, ref } from 'vue'

import Calculator from './components/Calculator.vue'

const CalNum = ref(1)
const CalIndexList = ref([1])
const lastMaxNum = ref(1)

function add() {
  CalNum.value += 1
  const list = []
  for (let i = 1; i <= CalNum.value; i++) {
    list.push(1)
  }
  CalIndexList.value = list
}
function setActiveZIndex(i: number) {
  if (CalIndexList.value[i] <= lastMaxNum.value) {
    CalIndexList.value[i] = lastMaxNum.value + 1
    lastMaxNum.value = lastMaxNum.value + 1
  }
}
</script>

<style lang="scss" scoped>
.views-calculator {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  .view-header {
    font-size: 20px;
    height: 50px;
    padding: 20px;
  }
  .view-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 1000;
  }
  .black-bg {
    background-color: #333;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
  }
}
</style>
